<template>
  <el-dialog :visible.sync="visible" :title="title" @open="handleDialogOpen" @close="handleDialogClose">
    <div id="xgplayer" />
  </el-dialog>
</template>

<script>
import Player from 'xgplayer'
export default {
  name: 'VideoPlayer',
  data: function() {
    return { visible: false, title: '' }
  },

  methods: {
    handleDialogOpen() {
      this.dialogCreated = true
    },
    handleDialogClose() {
      this.player.destroy()
    },

    open(title, option) {
      this.$data.visible = true
      this.$data.title = title
      this.$data.videoOption = option

      return this.setVideo(option)
    },
    setVideo(option) {
      this.timer && clearInterval(this.timer)
      return new Promise((resolve) => {
        this.timer = setInterval(() => {
          if (this.dialogCreated) {
            this.player = new Player({ id: 'xgplayer', ...option })
            clearInterval(this.timer)
            resolve(this.player)
          }
        }, 50)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .my-dialog {
    position: fixed;
    top: 0;
  }
</style>
